<template>

  <el-row class="containerStyle">
    <el-col :span="18">

      <el-row>
        <el-col :span="24">
          <!--当前时间-->
          <span class="crayon-clock-time">{{nowTime}}</span>
          <span style="margin-left: 10px">星期{{timeHome.week}}</span>
        </el-col>
      </el-row>

      <el-row class="el-rowStyle">
        <el-col :span="12">
            <span>
              阴历：{{ timeHome.yearLunar }} - {{ timeHome.monthLunar }} - {{ timeHome.dayLunar }}
            </span>
        </el-col>
        <el-col :span="12">
            <span v-for="(item, index) in timeHome.festivalList" :key="index" class="image-middle">
              <el-tag size="small">{{timeHome.festivalList[index]}}</el-tag>&nbsp;
            </span>
        </el-col>
      </el-row>

      <el-row class="el-rowStyle">
        <el-col :span="12">
           <span>
              {{ timeHome.year }} {{ timeHome.chineseZodiac }}年
           </span>
        </el-col>
        <el-col :span="12">
            <span>
              <el-tag v-if="timeHome.jieQi" type="success" size="small">{{timeHome.jieQi}}</el-tag>
            </span>
        </el-col>
      </el-row>

    </el-col>

    <el-col :span="6">
      <el-col :span="4">
        <!--<el-image style="width: 50px; height: 50px" :src="require('@/assets/images/index/flower.gif')" fit="contain"></el-image>-->
        <el-image style="width: 100px; height: 100px" :src="require('@/assets/images/ico/logo.gif')" fit="contain"></el-image>
      </el-col>
    </el-col>
  </el-row>



</template>

<script>
  import http from '@/utils/http'

  // 阴历阳历组件
  export default {
    name: "LunarSolar",
    data(){
      return {
        // 当前时间
        nowTime: null,
        // 要展示的时间数据
        timeHome: {
          date: null,
          yearLunar: null,
          monthLunar: null,
          dayLunar: null,
          lunarStr: null,
          year: null,
          chineseZodiac: null,
          week: null,
          jieQi: null,
          festivalList: null,
        },
        // 定时器
        timer: null,
      }
    },
    methods: {
      /**
       * 获取服务器当前时间
       */
      getTime(){
        http.get("/home/getTime", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.timeShow(new Date(res.data))

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 展示时间
       * @param date 从后台获取的服务器时间
       */
      timeShow(date) {
        // 需要计时器setInterval 给它每秒执行一次 这样我们的数据才会一直走动
        this.timer = setInterval(() => {
          // 定时器处理
          this.timeAnalyse(date)
        }, 1000);
      },
      /**
       * 时间解析
       * @param date 要解析的时间
       */
      timeAnalyse(date){
        // addtime 定义的一个变量 用来接收自动累加的时间
        // 设置秒
        let addTime = new Date(date.setSeconds(date.getSeconds() + 1));
        let yMd = addTime.getFullYear() + '-' + (addTime.getMonth() + 1).toString().padStart(2, '0') + '-' + addTime.getDate().toString().padStart(2, '0');
        let times = addTime.getHours().toString().padStart(2, '0') + ':' + addTime.getMinutes().toString().padStart(2, '0') + ':' + addTime.getSeconds().toString().padStart(2, '0');
        this.nowTime = yMd + '   ' + times;
      },
      /**
       * 查询首页的日历信息
       */
      getCalendar(){
        http.get("/home/getCalendar", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.timeHome = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      }
    },
    /**
     * 销毁组件的时候
     */
    destroyed(){
      // 清空定时器
      clearInterval(this.timer)
    },
    mounted(){
      // 先调用这样就不会让页面先是空白的
      this.timeAnalyse(new Date())
      this.getCalendar()
      // 开始调用定时器
      this.getTime()

      // 似乎无必要一分钟更新一次
      // this.timer = setInterval(() => {
      //   // 定时更新时间，从后台获取,一分钟更新一次
      //   this.getTime()
      // },60000)
    },
  }
</script>

<style scoped>

  .crayon-clock-time {
    font-size: 24px;
    color: #409eff;
  }

  .el-rowStyle {
    margin-top: 10px
  }

  .containerStyle {
    height: 100px;
    max-height: 100px;
  }

</style>
